<template>
  <div>
    <h2>{{ person }}</h2>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>薪资：{{ job.j1.salary }}k</h2>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
  </div>
</template>

<script>
import { reactive, shallowReadonly, readonly, toRefs } from 'vue';

export default {
  name: 'test_toRef_toRefs',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // readonly 使用后，页面上不允许修改
    // person = readonly(person)

    // shallowReadonly 使用后，只有第一层的属性不允许修改
    person = shallowReadonly(person)

    return {
      person,
      ...toRefs(person)
    }
  }
}
</script>
